<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../2018-11-30/lib/vue.js"></script>
</head>

<body>
    <div id="app">
        <input type="button" value="点击一下" @click="lang">
        <input type="button" value="住手！" @click="stop">
        <h4>{{msg}}</h4>
    </div>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                msg:'巴啦啦小魔仙，变身！！你是猪！',
                intervalId:null //定时器id
            },
            methods:{  //定义当前实例所有可用的方法
                // lang(){
                //     console.log(this.msg)
                //     var start = this.msg.substring(0,1)
                //     var end = this.msg.substring(1)
                //     this.msg = end + start
                // } 
                //这样需要手动，所以我们加上定时器

                lang(){
                    if(this.intervalId != null) return;

                    //var _this=this; //因为this指向问题需要定义一下。
                    // setInterval(function(){
                        this.intervalId = setInterval(()=>{  //使用箭头函数，解决this指向问题
                        // var start = _this.msg.substring(0,1)
                        // var end = _this.msg.substring(1)
                        // _this.msg = end + start
                        //这样的话，下面的this需要全面换上_this
                        var start = this.msg.substring(0,1)
                        var end = this.msg.substring(1)
                        this.msg = end + start
                    },400)
                },
                stop(){  //停止定时器
                    clearInterval(this.intervalId),
                    this.intervalId = null
                    //每当清除了定时器，需要重新把intervalId变为null。
                }
            }
        })
    </script>
</body>

</html>